<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>

  <em>1</em>
  <em>2</em>
  <em>3</em>
  <div class="box">
    <div class="xbox">
      <h2>二级标题1</h2>
      <h2>二级标题2</h2>
    </div>
    <h2>二级标题3</h2>
    <h2>二级标题4</h2>
  </div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <ul class="list">
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
    <li>link5</li>
  </ul>
  
</body>
<script>
  
  var xbox = document.querySelector(".xbox");
  // 子选父元素
  console.log( xbox.parentNode );

  var box = document.querySelector(".box")
  // 父选子元素
  console.log( box.children );
  // 下一个兄弟元素
  console.log( box.nextElementSibling );
  // 上一个兄弟元素
  console.log( box.previousElementSibling );

  var list = document.querySelector(".list");
  // 第一个子元素
  console.log( list.firstElementChild );
  // 最后一个子元素
  console.log( list.lastElementChild );

</script>
</html>